require(['init'], function () {
  var status="";
  var html="";
 function BannerInfo(options) {
    options = options || {};
    this.data = options.data || {};
    this.$dom = $('<div class="formList"></div>');

    this.init(this.configList);
  }

  BannerInfo.prototype = {
    configList: [
          {
            title: '<span class="icon icon-size-16 icon-asterisk"></span>图片上传',
            content: {
              init: function ($content, root) {

                root.$uploadCoverBox = $('<span class="icon icon-uploadimg" id="J_uploadCover">\
                  <img width="400" height="200" id="J_img">\
                  <input type="file" name="Filedata" multiple="multiple" data-url="/api/file/upload">\
                </span><p>(建议图片大小为800*300，最多可设置6张图片)</p>').appendTo($content);

                var $uploadCoverThumb = root.$uploadCoverBox.find('img')
                var $uploadInput = root.$uploadCoverBox.find('input')

                var coverUploadInput = new UploadInput({
                  $dom: $uploadInput,
                  done: function (uploadImgSrc) {
                    console.log(uploadImgSrc);
                    var uploadImgFullSrc='/api/file?u=' + uploadImgSrc;

                    if (uploadImgSrc) {
                      $uploadCoverThumb.attr('src', uploadImgFullSrc);
                      root.$uploadCoverBox.attr('data-value', uploadImgFullSrc);
                      root.data.cover = uploadImgFullSrc
                      return
                    }
                  }
                });

              },
              update: function ($content, root, formData) {
                if(formData.cover) {
                  root.$uploadCoverBox.find('img').attr('src', formData.cover)
                }
              }
            }
          },
          {
            title: '<label style="color:red">*</label>产品名称',
            content: {
              init: function ($content, root) {
                root.$titleInput = $('<input type="text" class="form-control" style="width: 400px" name="title" data-formcheck="length">').appendTo($content);
                root.$titleInput.on('change', function () {
                  root.data.title = $.trim(root.$titleInput.val());
                })
              },
              update: function ($content, root, formData) {
                root.$titleInput.val(formData.title).change();
              }
            }
          },
          // {
          //   title: '产品介绍',
          //   content: {
          //     init: function ($content, root) {
          //       root.$introInput = $('<input type="text" class="form-control" style="width: 400px;height:82px;" name="intro">').appendTo($content);
          //       root.$introInput.on('change', function () {
          //         root.data.intro = $.trim(root.$introInput.val());
          //       })
          //     },
          //     update: function ($content, root, formData) {
          //       root.$introInput.val(formData.intro).change();
          //     }
          //   }
          // },

      {
        title: '价格',
        content: {
          init: function ($content, root) {
            root.$priceInput = $('<input type="text" class="form-control" style="width: 400px" name="price">').appendTo($content);
            root.$priceInput.on('change', function () {
              root.data.price = $.trim(root.$priceInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$priceInput.val(formData.price).change();
          }
        }
      },
      {
        title: '主讲老师',
        content: {
          init: function ($content, root) {
            //root.$masterInput = $('<input type="text" class="form-control" style="width: 400px" name="master">').appendTo($content);
            var $selected_teacher= $('<select style="height: 30px;  width: 398px;padding-left:3px;"><option>请选择主讲老师</option></select>');
            $.ajax({
              url:'/api/teachers',
              // async:false,
              type:'get',
              success:function(data){
                console.log(data)
                $.each(data.data.list,function(index,it){
                  //console.log(it);
                  $('<option  data-uid='+it.teacheruid+'>'+it.lastname+'</option>').appendTo($selected_teacher);

                })
              }

            })
            root.$masterInput = $selected_teacher.appendTo($content);
            root.$masterInput.on('change', function () {
              root.data.master = $.trim(root.$masterInput.find("option:selected").attr("data-uid"));

            })
          },
          update: function ($content, root, formData) {
          //  root.$masterInput.val(formData.master).change();

          }
        }
      },
      {
        title: '课时时长',
        content: {
          init: function ($content, root) {
            root.$durationInput = $('<input type="text" class="form-control" style="width: 400px" name="duration">').appendTo($content);
            root.$durationInput.on('change', function () {
              root.data.duration = $.trim(root.$durationInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$durationInput.val(formData.duration).change();
          }
        }
      },
      {
        title: '产品课时数',
        content: {
          init: function ($content, root) {
            root.$schedulesInput = $('<input type="text" class="form-control" style="width: 400px" name="schedules">').appendTo($content);
            root.$schedulesInput.on('change', function () {
              root.data.schedules = $.trim(root.$schedulesInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$schedulesInput.val(formData.schedules).change();
          }
        }
      },
      {
        title: '课程类型',
        content: {
          init: function ($content, root) {
            var $selected_type= $('<select style="height: 30px;  width: 398px;padding-left:3px;"><option>请选择课程类型</option></select>');
            $.ajax({
              url:'/api/coursetypes',
              type:'get',
              success:function(data){
                console.log(data)
                $.each(data.data,function(index,it){
                  console.log(it.coursetypename)
                  $('<option  data-uid='+it.coursetypeuid+'>'+it.coursetypename+'</option>').appendTo($selected_type);

                })
              }

            })
            root.$coursetypeInput = $selected_type.appendTo($content);
            root.$coursetypeInput.on('change', function () {
              root.data.coursetype = $.trim(root.$coursetypeInput.find("option:selected").attr("data-uid"));
            })
          },
          update: function ($content, root, formData) {
            if(formData.coursetype) {
              //root.$uploadCoverBox.find('img').attr('src', formData.cover)
                root.$coursetypeInput.val(formData.coursetype).change();
            }

          }
        }
      },
      {
        title: '是否发布',
        content: {
          init: function ($content, root) {
            root.$statusInput = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox" style="position:relative;top: 5px;"><input type="checkbox" data-checkedmax="1" name="status" ></span>').appendTo($content);
              root.$statusInput.on('click', function () {
                var checked = $(this).find('[type="checkbox"]').prop('checked')
                if(checked) {
                  root.data.status = 2
                  $('input[name=status]').val('2');
                } else {
                  root.data.status = 1
                  $('input[name=status]').val('1');
                }
            })
          },
          update: function ($content, root, formData) {
            if(formData.status === 2) {
              root.$statusInput.prop('checked', true).parent().addClass('checked');
            }
          }
        }
      },
      {
        title: '是否热门课程',
        content: {
          init: function ($content, root) {
            root.$isHotInput = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox" style="position:relative;top: 5px;"><input type="checkbox" data-checkedmax="1" name="isHot"></span>').appendTo($content);
              root.$isHotInput.on('click', function () {
                var checked = $(this).find('[type="checkbox"]').prop('checked')
                if(checked) {
                  root.data.isHot = 1;
                  $('input[name=isHot]').val('1');
                } else {
                  root.data.isHot = 0;
                  $('input[name=isHot]').val('0');
                }
            })
          },
          update: function ($content, root, formData) {
            if(formData.isHot === 1) {
                root.$isHotInput.prop('checked', true).parent().addClass('checked');
            }
          }
        }
      },
      {
        title: '产品类型',
        content: {
          init: function ($content, root) {
            root.$typeInput = $('<span class="icon icon-size-16 icon-checkbox number1" data-type="checkbox" data-namuber="1" style="position:relative;top: 5px;" >\
              <input type="checkbox" data-checkedmax="1" name="type" value="1">\
            </span>\
            <span data-type="label" style="position: relative;top:7px">班课</span>\
            &nbsp&nbsp\
            <span class="icon icon-size-16 icon-checkbox number2" data-type="checkbox" data-namuber="2" style="position:relative;top: 5px;" >\
              <input type="checkbox" data-checkedmax="1" name="type" value="2">\
            </span>\
            <span data-type="label" style="position: relative;top:7px">约课</span>').appendTo($content);
            root.$typeInput.on('click', function () {
            //  var checked = $(".checked").attr("data-namuber");
            var checked=root.$typeInput.find('input[name=type]:checked').val();
            console.log(checked)
              if(checked==1){
                root.data.type=1
              }else{
                root.data.type=2
              }
            })
          },
          update: function ($content, root, formData) {
            if(formData.type == 1) {
              root.$typeInput.find('input[value="1"]').parent().addClass('checked');
            }else if(formData.type == 2){
             root.$typeInput.find('input[value="2"]').parent().addClass('checked');
            }

          }
        }
      }
    ],

    createFormLi: function (liConfig) {
      var $formLi = $('<div class="formLi"></div>').appendTo(this.$dom);
      $('<div class="formTitle"></div>').html('<span class="titleText">'+ liConfig.title +'</span>').appendTo($formLi);
      var $formContent = $('<div class="formContent"></div>').appendTo($formLi);
      liConfig.content.init($formContent, this);
      if(liConfig.content.update) {
        liConfig.content.update($formContent, this, this.data);
      }
    },

    init: function (liConfigList) {
      $.each(liConfigList, function (i, cur) {
        this.createFormLi(cur)
      }.bind(this));

    },

    getDefaultData: function () {
      return {
        startTime: new Date().getTime()
      }
    }
  }
  function getBannerList() {
    ajaxMethod({
      url: '/api/products',
      success: function (data) {
        var $listTable = $('#course_list').html('');
        $.ajax({
          url:'/api/coursetypes',
          method:'get',
          success:function(json){
          $thead = $('<thead>\
          <tr>\
            <th>序号</th>\
            <th>产品名称</th>\
            <th>价格</th>\
            <th>主讲老师</th>\
            <th>课时时长</th>\
            <th>产品课时数</th>\
            <th>课程类型</th>\
            <th>产品类型</th>\
            <th>产品名称</th>\
            <th>创建时间</th>\
            <th>创建人信息</th>\
            <th>产品状态</th>\
            <th>操作</th>\
          </tr>\
        </thead>').appendTo($listTable)

        var $tbody = $('<tbody></tbody>').appendTo($listTable)
        $.each(data.list, function (i, item) {
          // if(item.status=="1"){
          //   status="未发布";
          //   html="发布课程";
          //
          // }else if(item.status=="2"){
          //   status="已发布";
          //   html="关闭课程";
          //
          // }else if(item.status=="0"){
          //   status="已关闭";
          //   html="发布课程";
          // }

          var $item = $('<tr></tr>')
          $item.append('<td>'+ (i+1) +'</td>')
          $item.append('<td>'+ (item.title || '') +'</td>')
          $item.append('<td>'+ (item.price||'') +'</td>')
          var $tdlast=$('<td>'+(item.masterinfo==null?"":item.masterinfo.lastname)+'</td>').appendTo($item)
          $item.append('<td>'+ (item.master||'') +'</td>')
          $item.append('<td>'+ (item.duration||'') +'</td>')
          $item.append('<td>'+ (item.schedules||'') +'</td>')
          $item.append('<td>'+ (item.created_at||'') +'</td>')
          $item.append('<td>'+ (item.created_by||'') +'</td>')
          var coursetype_name=$('<td></td>').appendTo($item);
          $item.append('<td>'+ (item.type==1?"班课":"约课") +'</td>')
          $item.append('<td class="release">'+ (status||'') +'</td>')
          var $handle = $('<td></td>').appendTo($item);
          var $edit = $('<span class="btn btn-primary btn-sm btn-inverse ml5">编辑</span>').appendTo($handle);

          var $addClass = $('<a class="btn btn-primary btn-sm btn-inverse ml5" style="color:#398dee" href="product_class.html?id='+item.id+'">课节管理</a>').appendTo($handle);
          var $job = $('<span class="btn btn-primary btn-sm btn-inverse"></span>').appendTo($handle);
          $.each(json.data,function(index,it){
            //console.log(it.coursetypename)
            if(item.coursetype==it.coursetypeuid){
              var $coursetype_aneme=$('<a>'+(it.coursetypename||'')+'</a>').appendTo(coursetype_name)
            }
          })
          if(item.status=="1"){
            $('<a>关闭课程</a>').appendTo( $job);
            $job.on('click',function(){
              ajaxMethod({
               url:'/api/product/'+item.id+'/publish',
               method:'put',
               success:function(data){
                 window.location.reload();
               }
             })
            })

          }else if(item.status=="2"){
            $('<a>发布课程</a>').appendTo( $job);
            ajaxMethod({
              url:'/api/product/'+item.id+'/unpublish',
              method:'put',
              success:function(data){
                // $job.html("发布课程");
                // item.status=0;
                //   status="已关闭";
                 //window.location.reload();
              }
            })
          }
          // $job.on("click",function(){
          //   if(item.status=="1"){
          //
          //      ajaxMethod({
          //       url:'/api/product/'+item.id+'/publish',
          //       method:'put',
          //       success:function(data){
          //       $job.html("关闭课程");
          //       status="已发布";
          //       window.location.reload();
          //
          //       }
          //     })
          //   }else if(item.status=="2"){
          //     ajaxMethod({
          //       url:'/api/product/'+item.id+'/unpublish',
          //       method:'put',
          //
          //       success:function(data){
          //         $job.html("发布课程");
          //         item.status=0;
          //           status="已关闭";
          //          //window.location.reload();
          //       }
          //     })
          //   }
          // })
          $edit.on('click', function () {
            var bannerInfo = new BannerInfo({
              data: {
                title: item.title,
                intro: item.intro,
                cover: item.cover,
                price:item.price,
                master:item.masterinfo,
                duration:item.duration,
                schedules:item.schedules,
                coursetype:item.coursetype,
                type:item.type,
                isHot:item.isHot,
                status:item.status
              }
            })
            var popUpBox=new PopUpBox({
              type:'dom',
              style:'default contentScroll',
              submitBtnType:'confirm',
              titleText:'请选择',
              drag:true,
              show:true,
              content: bannerInfo.$dom,
              callback:{
                yes: function (e) {
                  console.log(bannerInfo.data);
                  ajaxMethod({
                    url: '/api/product/' + item.id,
                    method: 'put',
                    data: bannerInfo.data,
                    success: function (data, status) {
                      if(status.code == 0) {
                        getBannerList()
                        popUpBox.close()
                      }
                    }
                  })
                  return false;
                }
              },
              position:{
                width:628,
                height:550
              }
            })
          })
          $tbody.append($item)
        })
        }
      })
      }
    })
  }
  // $("#add_course").on('click',function(){
  //   var bannerInfo = new BannerInfo()
  //   var popUpBox=new PopUpBox({
  //     type:'dom',
  //     style:'default contentScroll',
  //     submitBtnType:'confirm',
  //     titleText:'请选择',
  //     drag:true,
  //     show: true,
  //     content: bannerInfo.$dom,
  //     callback:{
  //       yes: function (e) {
  //         console.log(bannerInfo.data);
  //         ajaxMethod({
  //           url: '/api/product',
  //           method: 'post',
  //           data: bannerInfo.data,
  //           success: function (data, status) {
  //             console.log(data)
  //             if(status.code == 0) {
  //               getBannerList()
  //               popUpBox.close()
  //             }
  //           }
  //         })
  //         return false;
  //       }
  //     },
  //     position:{
  //       width:628,
  //       height:550
  //     }
  //   })
  // })
  getBannerList()
})
